<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	   #tou{
           float:right;
           margin:20px;
	   }
	   #zi{
           float:right;
           display:none;
	   }
	</style>
	<script>
	 window.onload = function(){
	 	var oTou = document.getElementById("tou");
	 	var oZi = document.getElementById("zi");
	 	var t;
	 	//移入移出头像时 文字显示和隐藏
	 	oZi.onmouseover = oTou.onmouseover = function(){
	 		clearTimeout(t);
	 		oZi.style.display = "block";
	 	}
	 	oZi.onmouseout = oTou.onmouseout = function(){
	 	 	t = setTimeout(function(){
                 oZi.style.display = "none";
	 	 	},1000);
	 	 }
	 }
	</script>
</head>
<body>
   <div id="tou">
     <img src="1.png">
   </div>
   <div id="zi">
     <img src="1.png">
   </div>
	
</body>
</html>